<template lang="">
    <div>
   <!-- <scroll class="middle-r" 
        ref="lyricList" 
        :data="currentLyric && currentLyric.lines">
    <div class="lyric-wrapper">
      <div v-if="currentLyric">
        <p ref="lyricLine"
          class="text"
          :class="{'current': currentLineNum === index}"
          v-for="(line, index) in currentLyric.lines"
          :key="line.time">{{line.txt}}</p>
      </div>
    </div>
</scroll> -->
    {{lyric}}  
    12
    </div>


</template>

<script setup lang="ts">

import { ref, reactive, onMounted, nextTick } from 'vue';
// import Lyric from "lyric-parser";
import { useRoute } from "vue-router"
import { getLyric } from '@/api/MusicDetail';
const lyric = ref()
const idd = ref()
onMounted(async () => {
    // let id: number = Number(route.query.id)
    // let url: string = String(route.query.url)
    // let res = await getLyric(1993340900)
    // console.log(res);

    // console.log(res.data.lrc.lyric);
    // lyric = res.data.lrc.lyric
    // lyric = new Lyric(res.data.lyric, handler)
    getLyricFun(1993340900)
});

function getLyricFun(id) {
    console.log(1);

    if (lyric.value) {
        // getLyric本身返回的就是Promise
        return Promise.resolve(lyric.value);
    }
    // 封装Promise，只用于获取歌词
    return new Promise((resolve, reject) => {
        getLyric(id).then((res) => {
            if (res.data.lrc.version === 8) {
                lyric.value = res.data.lrc.lyric;
                resolve(lyric.value);
                console.log(lyric.value);

            } else {
                // 获取不到歌词
                // eslint-disable-next-line prefer-promise-reject-errors
                reject('no lyric');
            }
        });
    });
}

function currentSong(newSong, oldSong) {
    if (newSong.id === oldSong.id) {
        return;
    }
    nextTick(() => {
        audio.value.play().catch((error) => {
            // this.togglePlaying();
            // eslint-disable-next-line no-alert
            alert('播放出错,暂无该歌曲资源');
        });
        getLyricFun(newSong.id);
    });
}
// function hanlder({ lineNum, txt }) {
//     // this hanlder called when lineNum change
// }

// //获取歌词的时候，实例化
// function getLyric() {
//     this.currentSong.getLyric().then((lyric) => {
//         //利用第三方库: js-lyric ，解析我们的歌词，生成方便操作的对象
//         this.currentLyric = new Lyric(lyric, this.handleLyric)
//         // ···
//     })
// }
// function handleLyric({ lineNum, txt }) {
//     this.currentLineNum = lineNum
//     if (lineNum > 5) {
//         //v-for循环，所以this.$refs.lyricLine是一个数组，从而获取相应DOM
//         let lyricEl = this.$refs.lyricLine[lineNum - 5]
//         //调用scroll组件API
//         this.$refs.lyricList.scrollToElement(lyricEl, 1000)
//     } else {
//         //如果小于5，则滚动制顶部
//         this.$refs.lyricList.scrollTo(0, 0, 1000)
//     }
//     this.playingLyric = txt
// }

</script>